<template>
    <div class="addPledge">
        <assets-head :title="$t('新增质押')"></assets-head>
        <div class="contentBox">
            <div class="imgBox"><img src="../../assets/image/addpledgeBg.png" alt="" /></div>
            <div class="px-32">
                <div class="content box-shad tabBackground">
                    <div class="mb-38">
                        <div class="font-32 textColor">{{ $t('质押') }}</div>
                        <div class="flex mt-20 h-96 items-center inputBox inputBackground1 textColor relative">
                            <input class="h-full pl-22 inputBackground1" type="number" v-model="pledgeAmount" 
                                :placeholder="$t('请输入质押数量')" @input="changeMount" />
                            <div class="right w-252 h-62 flex items-center pl-26 box-border">
                                <img :src="`${HOST_URL}/symbol/${pledgeCurrency.toLowerCase()}.png`" class="w-48 h-48"
                                    alt="" />
                                <span class="ml-14 mr-30 w-90">{{ pledgeCurrency.toUpperCase() }}</span>
                            </div>
                        </div>
                        <div class="flex items-center font-24 mt-16 text-grey">
                            {{ $t('可用余额') }}：<span class="mr-14">{{ volume ||
                                '--' }}&nbsp;{{ pledgeCurrency.toUpperCase() }}</span>
                            <img click="$router.push('/exchange/exchangePage')" src="../../assets/image/exchangeIcon.png"
                                class="w-28 h-28" alt="" />
                        </div>
                        <div class="flex justify-between font-32 mt-48">
                            <div class="text-grey">{{ $t('质押后质押率') }}</div>
                            <div class="textColor">{{ pledgeRate !== '' ? (pledgeRate * 10000 / 100).toFixed(2) : '--' }}%
                            </div>
                        </div>
                        <div class="h-96 lh-96 btnMain rounded-lg text-center text-black font-34 mt-96"
                            @click="getReplenishOrder">{{ $t('确认质押') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import Axios from "@/API/pledgeLoan.js";
import { _getAllWallet } from "@/API/fund.api";
import { HOST_URL } from '@/config'
import { debounce } from '@/utils/utis'
export default {
    props: {

    },
    components: {
        assetsHead
    },
    data() {
        return {
            HOST_URL,
            walletList: [],
            id: '',
            pledgeAmount: '',
            pledgeRate: '',//质押率
            pledgeCurrency: '', //质押币种
            volume: '', //可用余额
        }
    },
    mounted() {
        this.id = this.$route.query.id
        this.pledgeCurrency = this.$route.query.pledgeCurrency
        this.getList()
    },
    methods: {
        changeMount() {
            if (this.pledgeAmount >= this.volume) {
                this.pledgeAmount = this.volume
            }

            this.debounceFn()

        },
        debounceFn: debounce(function () {
            this.getLoanParam()
        }, 500),
        getLoanParam() {
            if (this.pledgeAmount == '') {
                this.$toast(this.$t('请输入质押数量'))
                return false
            }
            Axios.getLoanParam({
                loanOrderId: this.id,
                pledgeAmount: this.pledgeAmount
            }).then(res => {
                this.pledgeRate = res.data.pledgeRate
            }).catch(error => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            })
        },
        getList() {
            _getAllWallet().then((res) => {
                this.walletList = res.extends;
                let initObj = this.walletList.find(item => {
                    return item.symbol.toLowerCase() == this.pledgeCurrency
                })
                this.volume = initObj.usable
            });
        },
        getReplenishOrder() {
            if (this.pledgeAmount == '') {
                this.$toast(this.$t('请输入质押数量'))
                return false
            }
            Axios.replenishOrder({
                loanOrderId: this.id,
                pledgeAmount: this.pledgeAmount
            }).then(res => {
                this.$toast(this.$t('质押成功'));
                this.$router.push('/pledgeLoanOrder')
            }).catch(error => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.addPledge {
    width: 100%;
    box-sizing: border-box;
}

.contentBox {
    position: relative;

    .imgBox {
        width: 100%;
        height: 300px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .content {
        border-radius: 8px;
        padding: 36px 30px 36px 34px;
        position: relative;
        margin-top: -92px;

        .inputBox {
            input {
                flex: 1;
                border: none;
            }

            .right {
                border-left: 1px solid #B8BCC5;
            }
        }

    }
}

.slectBox {
    position: absolute;
    left: 0;
    top: 114px;
    width: 100%;

    @include themify() {
        background: themed("main_background");
    }

    border-radius: 4px;
    padding: 0px 20px 76px 20px;
    box-sizing: border-box;

    @include themify() {
        border: 1px solid themed("line_color");
    }

    z-index: 2;

    &.slectBoxMax {
        max-height: 574px;
        overflow-y: auto;
    }
}
</style>